<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title>注册页面</title>
		<link rel="stylesheet" href="./css/jquery.mobile-1.4.5.min.css" />
		<script type="text/javascript" src="js/jquery-2.0.0.min.js"></script>
		<script src="./js/jquery.mobile-1.4.5.min.js"></script>
		<link rel="stylesheet" type="text/css" href="css/base.css"/>
		<link rel="stylesheet" href="style.css">
	</head>
	
	<body style="z-index: 0;">
		
		<div id="outer" data-role="page">
			<div style="height: 3rem;text-align: left; position: fixed;background-color: white;padding-left: 0.5rem;padding-top: 0.5rem;" >
				<a class="a1" href="index.html" style ="font-size: 2rem;margin-left: 0.5rem;"data-role="none" data-transition="slide" data-direction="reverse" ><i class="icon-jiantou-zuo"></i></a>
			</div>
			<div style="margin-top: 0;height: 10rem;">
				<div style="height: 7rem;">
					<div style="margin: 5.5rem auto;">
						<img src="img/logo.png">
					</div>
				</div>
					<h1 class="titlefont" >校园论坛</h1>
			</div>
			<div style="height: 35vh;">
				<form action="" method="post">
						
						<input class="input1" type="text" name="username" id="number" placeholder="手机号" onkeyup="checkRegexp()" data-role="none" onfocus="this.placeholder=''" onblur="this.placeholder='手机号'"/>
							<span id="tishi2" class="span1" "></span>				
						<input class="input1" style="margin-top: 0;" type="password" name="password" id="pwd" onkeyup="checkPass()" data-role="none" placeholder="输入密码" onfocus="this.placeholder=''" onblur="this.placeholder='输入密码'"/>
							<span id="tishi1" class="span1"></span>
						<input class="input1" style="margin-top: 0;" type="password" name="password1" id="pwd1" oninput="validate()" data-role="none" placeholder="确认密码" onfocus="this.placeholder=''" onblur="this.placeholder='确认密码'"/>
								<span id="tishi"class="span1"></span>
								
			</div>
			<div class="footer" v-show="hideshow">
				<a href="main.html" data-transition="pop" style="text-decoration: none;">
					<button class="input1" type="submit" name="" id="submit" data-role="none">注册</button>
				</a>
			</div>
			</form>
		</div>
		
	</body>
	<script>
		function checkPass(){
		var s= document.getElementById("pwd").value;
		  if(s.length < 8){
		            return 0;
		  }
		 var ls = 0;
		
		 if(s.match(/([a-z])+/)){
		 
		     ls++;
		 
		  }
		
		 if(s.match(/([0-9])+/)){
		       ls++;  
		 }
		
		 if(s.match(/([A-Z])+/)){
		       
		        ls++;
		 
		  }
		  if(s.match(/[^a-zA-Z0-9]+/)){
		        ls++;
		    
		    }
		  if(ls<3){
		document.getElementById("tishi1").innerHTML="<font color='red'>密码复杂度不够，请重新设置！</font>";
		
		  }
		else{
			document.getElementById("tishi1").innerHTML="";
		}
		 }
		function validate() {
		    var pwd1 = document.getElementById("pwd").value;
		    var pwd2 = document.getElementById("pwd1").value;
		 
		<!-- 对比两次输入的密码 -->
		
		    if(pwd1 != pwd2)
		     {
		        document.getElementById("tishi").innerHTML="<font color='red'>两次密码不一致</font>";
		     }
			 else{
				document.getElementById("tishi").innerHTML="<font color='green'>密码一致</font>"; 
			 }
		}
		function checkRegexp() {
				var n=document.getElementById("number").value;
		      var regex = /^(0|\+?86|17951)?(13[0-9]|15[012356789]|17[013678]|18[0-9]|14[57]|16[67])[0-9]{8}$/
		      var bool = regex.test(n)
		      console.log(bool)
		      if (!bool) {
		        document.getElementById("tishi2").innerHTML="<font color='red'>输入的不是手机号</font>";
		        return
		      }
			  else{
				  document.getElementById("tishi2").innerHTML="";
			  }
		 
		    }
	</script>
</html>
